<template>
  <section class="table-wrap">
    <el-table :data="currentData"
              height="468"
              style="width: 100%"
              border
              :row-class-name="tableRowClassName"
              :cell-class-name="cellClassName"
              @selection-change="handleSelectionChange">
      <el-table-column v-if="selectionFlag"
                       type="selection"
                       width="50"
                       :selectable="selectEnable">
      </el-table-column>
      <template v-for="(item, index) in tableHeaderData">
        <el-table-column v-if="item.type === 'contractNo'"
                         :key="index"
                         :prop="item.type"
                         :label="item.label"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <link-detail :value="`${scope.row.contractNo}`"
                         :row="scope.row"
                         :url="`wayBillDetailWindow`"
                         :params-data="paramsData"
                         :custom="custom"
                         v-bind="$attrs"></link-detail>
            <el-tag v-if="selectionFlag && ids.includes(scope.row.id)"
                    size="mini">已选</el-tag>
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type === 'toInfo'"
                         :key="index"
                         :prop="item.type"
                         :label="item.label"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <waybill-consignee-sender-info :row="scope.row"
                                           class="tooltipSty" />
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type === 'toAddress'"
                         :key="index"
                         :prop="item.type"
                         :label="item.label"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <waybill-consignee-sender-address :row="scope.row"
                                              class="tooltipSty" />
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type === 'fromInfo'"
                         :key="index"
                         :prop="item.type"
                         :label="item.label"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <ShipmentSenderInfo :row="scope.row"
                                :value="infoValues(scope.row)"
                                class="tooltipSty" />
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type === 'fromAddress'"
                         :key="index"
                         :prop="item.type"
                         :label="item.label"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <ShipmentSenderAddress :row="scope.row"
                                   :value="addressValues(scope.row)"
                                   class="tooltipSty" />
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type === 'orderInfo'"
                         :key="index"
                         :prop="item.type"
                         :label="item.label"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <order-info class="tooltipSty"
                        :name="combineId ? 'oneBillWayinfo': ''"
                        :row="scope.row" />
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type === 'trackType'"
                         :key="index"
                         :prop="item.type"
                         :label="item.label"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <tracking :track-type="`${scope.row.trackType || (scope.row.device && scope.row.device.trackType)}`"
                      :device-code="`${scope.row.deviceCode || (scope.row.device && scope.row.device.deviceCode)}`"
                      class="tooltipSty" />
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type === 'fromTime' || item.type === 'toTime'"
                         :key="index"
                         :prop="item.type"
                         :label="item.label"
                         :show-overflow-tooltip="true">
          <template slot-scope="scope">
            {{$moment(scope.row[item.type]).format("YYYY-MM-DD HH:mm")}}
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type === 'operation'"
                         :key="index"
                         :prop="item.type"
                         :label="item.label">
          <template slot-scope="scope">
            <div class="opertionSty">
              <div class="opertion pointer"
                   @click="remove(scope.$index)">移出</div>
              <div class="opertion ml10 pointer"
                   @click="handleAdjustment(scope.row, scope.$index)">
                调整
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column v-else
                         :key="index"
                         :prop="item.type"
                         :label="item.label"
                         :show-overflow-tooltip="true">
        </el-table-column>
      </template>
    </el-table>
    <!-- 总计 -->
    <div v-if="tableFooter"
         class="total">
      <div class="amountSty">
        <div>
          总数量<span class="fontSty">{{ amount.totalQuantity }}</span>，
        </div>
        <div>
          总重量<span class="fontSty">{{ amount.calculateWeight }}公斤</span>，
        </div>
        <div>
          总体积<span class="fontSty">{{ amount.calculateVolume }}立方米</span>
        </div>
      </div>
    </div>
    <adjustment-dialog v-if="visible"
                       :visible.sync="visible"
                       :active-amount="activeAmount"
                       @adjustmentData="adjustmentData" />
  </section>
</template>

<script>
import WaybillConsigneeSenderAddress from "@components/table/column/WaybillConsigneeSenderAddress.vue";
import WaybillConsigneeSenderInfo from "@components/table/column/WaybillConsigneeSenderInfo.vue";
// import ShippingInfo from "@components/table/column/ShippingInfo.vue";
import ShipmentSenderInfo from "@components/table/column/ShipmentSenderInfo.vue"
import ShipmentSenderAddress from "@components/table/column/ShipmentSenderAddress.vue"
import OrderInfo from "@components/table/column/OrderInfo.vue";
import LinkDetail from "@components/table/column/LinkColumn.vue";
import Tracking from "@components/table/column/Tracking";
import AdjustmentDialog from "./AdjustmentDialog.vue";
export default {
  name: "OrderList",
  components: {
    WaybillConsigneeSenderInfo,
    WaybillConsigneeSenderAddress,
    // ShippingInfo,
    ShipmentSenderInfo,
    ShipmentSenderAddress,
    OrderInfo,
    Tracking,
    LinkDetail,
    AdjustmentDialog
  },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    currentData: {
      type: Array,
      default: () => []
    },
    total: {
      type: Number,
      default: () => 0
    },
    pageSize: {
      type: Number,
      default: () => 10
    },
    page: {
      type: Number,
      default: () => 1
    },
    colWidth: {
      type: Number,
      default: () => 162
    },
    amount: {
      type: Object,
      default: () => { }
    },
    tableFooter: {
      type: Boolean,
      default: true
    },
    selectionFlag: {
      type: Boolean,
      default: false
    },
    operationFlag: {
      type: Boolean,
      default: false
    },
    combineId: {
      type: [String, Number],
      default: null
    },
    // 复制合单显示无效运单样式
    isInvalid: {
      type: Boolean,
      default: false
    },
    combineNo: String
  },
  data () {
    return {
      visible: false,
      tableHeaderData: [
        { label: "合同编号", type: "contractNo" },
        { label: "发货时间", type: "fromTime" },
        { label: "要求到货时间", type: "toTime" },
        { label: "发货方信息", type: "fromInfo" },
        { label: "发货地址", type: "fromAddress" },
        { label: "收货方信息", type: "toInfo" },
        { label: "收货地址", type: "toAddress" },
        { label: "订单信息", type: "orderInfo" },
        { label: "跟踪方式", type: "trackType" },
        { label: "状态", type: "statusDesc" }
      ],
      paramsData: ["id", "status"],
      selectData: [],
      custom: { oneBillFlag: true },
      activeAmount: {
        calculateWeight: 0,
        calculateVolume: 0,
        weightAddition: 0,
        volumeAddition: 0,
        weight: null,
        volumn: null
      },
      close: [10, 20, 50, 60],
      activeIndex: null
    };
  },
  computed: {
    ids () {
      return this.tableData.map((item) => { return item.id });
    },
    infoValues () {
      return row => {
        return {
          contactName: row.fromContactName,
          contactMobile: row.fromContactMobile
        }
      }
    },
    addressValues () {
      return row => {
        return {
          province: row.fromProvince,
          city: row.fromCity,
          district: row.fromDistrict,
          address: row.fromAddress
        }
      }
    }
  },
  mounted () {
    if (this.operationFlag) {
      this.tableHeaderData.push({
        label: "操作",
        type: "operation"
      });
    }
  },
  methods: {
    tableRowClassName ({ row }) {
      if (this.isInvalid && ((row.combineNo && this.combineNo && row.combineNo != this.combineNo) || row.status != 10 || row.billDayStatus || this.close.includes(row.closeStatus))) {
        return 'warning-row';
      }
      return '';
    },
    cellClassName ({ row, column, rowIndex, }) {
      if (this.isInvalid && ((row.combineNo && this.combineNo && row.combineNo != this.combineNo) || row.status != 10 || row.billDayStatus || this.close.includes(row.closeStatus))) {
        if (rowIndex === 0) {
          return 'warning-cell-zero';
        }
        return 'warning-cell';
      }
      return '';
    },
    // 调整
    handleAdjustment (item, index) {
      this.$emit("editWaybill", item, index)

      // this.activeIndex = this.pageSize * (this.page - 1) + index;
      // this.activeAmount = {
      //   weight: item.makeupWeight || null,
      //   volumn: item.makeupVolume || null,
      //   calculateWeight: item.calculateWeight,
      //   calculateVolume: item.calculateVolume,
      // };
      // if (this.combineId) {
      //   this.activeAmount.weightAddition = item?.waybillCache?.weightAddition;
      //   this.activeAmount.volumeAddition = item?.waybillCache?.volumeAddition;
      // } else {
      //   this.activeAmount.weightAddition = item.weightAddition;
      //   this.activeAmount.volumeAddition = item.volumeAddition;
      // }
      // this.visible = !this.visible;
    },
    // 计算货物总数信息
    adjustmentData (formData) {
      this.tableData[this.activeIndex].makeupWeight = Number(formData.weight);
      this.tableData[this.activeIndex].makeupVolume = Number(formData.volumn);
      this.$emit("calc");
    },
    // 移出
    remove (index) {
      this.$emit("deleteHandel", this.pageSize * (this.page - 1) + index);
    },
    selectEnable (row) {
      if (this.ids.includes(row.id)) {
        return false
      } else {
        return true
      }
    },
    // 多选
    handleSelectionChange (data) {
      this.selectData = data;
    }
  }
};
</script>

<style lang="scss" scoped>
.table-wrap {
  // padding: 0px 20px;
  ::v-deep .el-table--small {
    margin-bottom: 20px;
  }
}
.opertionSty {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.opertion {
  color: var(--prev-icon-color-orange);
}
.ml10 {
  margin-left: 10px;
}
.total {
  font-size: 14px;
  font-weight: 400;
  color: var(--prev-color-text-ashes);
  .amountSty {
    display: flex;
    align-items: center;
    line-height: 40px;
    margin: 10px 0;
  }
  .fontSty {
    color: var(--prev-icon-color-orange);
  }
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}
/**
 * 火狐tooltip不显示问题
 */
.tooltipSty {
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline;
}
</style>
<style>
.el-table .warning-row {
  background: rgba(255, 231, 231, 1);
}
.el-table .warning-cell {
  /* border-top: 1px solid rgba(242, 5, 5, 1); */
  border-bottom: 1px solid rgba(242, 5, 5, 1) !important;
}
.el-table .warning-cell-zero {
  border-top: 1px solid rgba(242, 5, 5, 1);
  border-bottom: 1px solid rgba(242, 5, 5, 1) !important;
}
</style>